import { useEffect, useState } from 'react'
import { message, Space, Table, Button, Tag, Input, Tree } from 'antd';
import type { TableProps, TreeDataNode, TreeProps } from 'antd';
import axios from 'axios'
import '../../mock'
import Forms from '../../components/Forms'
import { SearchOutlined, DownOutlined } from '@ant-design/icons'
import './index.css'
const Index = () => {
	const [showMenu, setshowMenu] = useState<boolean>(true)
	const [showSelect, setshowSelect] = useState<boolean>(true)
	const [showSearch, setshowSearch] = useState<boolean>(true)
	const [showReset, setshowReset] = useState<boolean>(true)
	const [MenuList, setMenuList] = useState<any>([])
	const [expandedRowKeys, setExpandedRowKeys] = useState<any>([])
	const getMenuList = async () => {
		const res = await axios.post('/api/menuList')
		console.log(res)
		const { status, data } = res
		if (status === 200) {
			message.success('获取数据成功')
			setMenuList(data.tableList)
		}
	}
	const treeData: TreeDataNode[] = [
		{
			title: 'XXX科技',
			key: '0-0',
			children: [
				{
					title: '深圳总公司',
					key: '0-0-0',
					children: [
						{
							title: '研发部门',
							key: '0-0-0-0',
						},
						{
							title: '市场部门',
							key: '0-0-0-1',
						},
						{
							title: '测试部门',
							key: '0-0-0-2',
						},
						{
							title: '财务部门',
							key: '0-0-0-3',
						},
						{
							title: '运维部门',
							key: '0-0-0-4',
						},
					],
				},
				{
					title: '长沙分公司',
					key: '0-0-1',
					children: [
						{
							title: '市场部门',
							key: '0-0-1-0',
						},
						{
							title: '财务部门',
							key: '0-0-1-1',
						},
					],
				},

			],
		},
	];
	useEffect(() => {
		getMenuList()
	}, [])
	console.log(MenuList)
	const columns: TableProps['columns'] = [
		{
			title: '菜单名称',
			dataIndex: 'menuName',
			key: 'menuName',
			render: (text) => <a>{text}</a>,
		},
		{
			title: 'Icon',
			dataIndex: 'icon',
			key: 'icon',

		},
		{
			title: '菜单Id',
			dataIndex: 'menuId',
			key: 'menuId',
		},
		{
			title: '订单数量',
			dataIndex: 'orderNum',
			key: 'orderNum',
		},
		{
			title: 'parentId',
			dataIndex: 'parentId',
			key: 'parentId',
		},
		{
			title: '路径',
			dataIndex: 'path',
			key: 'path',
		},
		{
			title: '状态',
			dataIndex: 'status',
			key: 'status',
			render: (_, record) => (
				<Space size="middle">
					{record.status === '0' ? (<Tag color="green">正常</Tag>) : (<Tag color="orange">错误</Tag>)}
				</Space>
			),
		},
		{
			title: '操作',
			key: 'action',
			render: (_, record) => (
				<Space size="middle">
					<a>Invite {record.name}</a>
					<a>Delete</a>
				</Space>
			),
		},
	];
	// 获取MenuList所有的 key 
	const getAllKey = (data: any) => {
		let allKey: any = []
		data.forEach((item: any) => {
			allKey.push(item.key)
			if (item.children && item.children.length > 0) {
				allKey = allKey.concat(getAllKey(item.children))
			}
		});
		return allKey
	}
	// 点击展开收起 实现 全部展开全部收起功能
	const clickHandler = () => {
		if (expandedRowKeys.length > 0) {
			return setExpandedRowKeys([])
		}
		else {
			const allkey = getAllKey(MenuList)
			setExpandedRowKeys(allkey)
		}
	}
	// 筛选的显示隐藏
	const showOrHidden = () => {
		setshowMenu(!showMenu)
		setshowSelect(!showSelect)
		setshowSearch(!showSearch)
		setshowReset(!showReset)
	}
	const styles = {
		margin: '0px 15px'
	}
	const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
		console.log('selected', selectedKeys, info);
	};
	return (
		<div>
			<div>
				<Forms showMenu={showMenu} showSelect={showSelect} showSearch={showSearch} showReset={showReset}></Forms>
			</div>
			<div className='action'>
				<div >
					<Button style={styles} type='primary'>新增</Button>
					<Button style={styles} onClick={() => clickHandler()}>{expandedRowKeys.length > 0 ? '全部收起' : '全部展开'}</Button>
				</div>
				<div className='showOrHidden'>
					<Button className='btn' onClick={() => showOrHidden()}><SearchOutlined /></Button>
				</div>
			</div>
			<Table columns={columns} dataSource={MenuList} pagination={false}
				expandable={{
					expandedRowKeys,
					onExpandedRowsChange: setExpandedRowKeys,
					childrenColumnName: 'children',
					indentSize: 30
				}} />
		</div>
	)
}

export default Index
